<template>
    <app-header></app-header>
    <video controls autoplay :poster="'https://images.weserv.nl/?url=' + detailInfo.poster">
        <source :src="detailInfo.videoSrc" type="video/mp4">
    </video>
    <div class="info">
        <div class="title">{{ detailInfo.videoTitle }}</div>
        <div class="infoFooter">
            <div class="author">
                <img :src="'https://images.weserv.nl/?url=' + detailInfo.authorIconSrc" alt="">
                {{ detailInfo.author }}
            </div>
            <div class="right">
                <i>{{ detailInfo.playCount }}观看</i>
                <van-icon name="good-job" color="gray">{{ detailInfo.likeCount }}</van-icon>
                <van-icon name="star" color="gray">{{ detailInfo.favCount }}</van-icon>
            </div>
        </div>
    </div>
    <van-tabs v-model:active="active" animated @click-tab="onClickTab">
        <van-tab title="推荐">
        </van-tab>
        <van-tab title="评论">
        </van-tab>
    </van-tabs>
    <router-view></router-view>
</template>

<script lang="ts" setup>
import { ref,watch } from "vue"
import appHeader from '@/components/app-header.vue';
import { useRouter } from 'vue-router';
import { getVideoDetail } from "@/api/request"
const router = useRouter();
console.log("router", router);
console.log("route", router.currentRoute);
let id = router.currentRoute.value.params.id;
interface formatDetail {
    author?: string
    authorIconSrc?: string
    commentCount?: number
    date?: string
    favCount?: string
    id?: string
    likeCount?: string
    playCount?: string
    poster?: string
    videoSrc?: string
    videoTitle?: string
}
let detailInfo = ref<formatDetail>({

});
getVideoDetail(id).then(res => {
    console.log(res);
    detailInfo.value = res.data.result;
    console.log(detailInfo.value);
})
function getData(){
    id = router.currentRoute.value.params.id;
    getVideoDetail(id).then(res => {
    console.log(res);
    detailInfo.value = res.data.result;
    console.log(detailInfo.value);
})
}


function onClickTab(value) {
        console.log(value);
        if(value.title=="评论"){
            router.push({
                path:`/video/${id}/comment`,
            })
            console.log(router.currentRoute);
            
        }
        if(value.title=="推荐"){
            router.push({
                path:`/video/${id}/recommend`,
            })
            console.log(router.currentRoute);
        }
        
}
let active = ref(0);
watch(router.currentRoute,(newValue,old)=>{
    getData();
})

</script>

<style lang="less">
video {
    width: 100%;
}

.info {
    background-color: #fff;
    text-align: left;
    padding-left: 2vw;
}

.title {
    margin: 3vw 0;
}

.author img {
    width: 5vw;
    height: 5vw;
    border-radius: 50%;
}

.infoFooter {
    display: flex;
    justify-content: space-between;

    .author {
        padding-left: 2vw;
    }

    .right {
        padding-right: 4vw;
        color: gray;

        i {
            margin-right: 4vw;
            font-style: normal;
        }
    }

}
</style>
    